<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM" ref="btn">点我输出</button>

    <SchoolSchool ref="sch"></SchoolSchool>
  </div>
</template>

<script>
import SchoolSchool from "./components/School";

export default {
  name: "App",
  components: {
    SchoolSchool,
  },
  data() {
    return {
      msg: "欢迎",
    };
  },
  methods: {
    showDOM() {
      console.log(this);
      console.log(this.msg);
      console.log(this.$refs);
      console.log(this.$refs.title);//拿到节点
    },
  },
};
</script>

<style>
</style>

// ref属性：
// 1.被用来给元素或子组件注册引用信息（ID的替代者）
// 2.应用在html标签上获取的是真实的DOM元素，应用在组建标签上的是组件实例对象（vc）
// 3.使用方式：
//    打标识：<h1 ref='xxx'>...</h1>或<School ref='xxx' ></School>
//    获取：this.$refs.xxx